<template>
  <div class="body-layout">

    <header class="top-header">
      <!-- 返回按钮 -->
      <a @click="$router.back(-1);" class="header-left"></a>
      <article class="header-middle">大V详情</article>
    </header>
    <div class="marginTop44" ref="Vlist" :style="{height:height +'px'}">
      <div>

        <!--大v-->
        <div class="vf-user-detail">
          <div class="vf-user-detail_img border">
            <img :src="authorDetail.author_avatar"/>
          </div>

          <div class="concern" v-show="followState" :class="{'al-concern':followState}" @click="handleFollow">
            已关注
          </div>
          <div class="concern" v-show="!followState" @click="handleFollow" v-stat='{action_type:2,button_type:11}'>
            <i></i>关注
          </div>

          <div class="vf-user-detail_name">
            <img src="../assets/images/icon-v.png" alt="">
            <span>{{authorDetail.author_name}}</span>
            <span>粉丝：{{authorDetail.follower_count}}</span>
          </div>
          <p>{{authorDetail.desc}}</p>
        </div>

        <div class="vf-news">

          <!-- 文章列表 -->
          <div class="vf-news-allview border-bottom">
            全部观点({{authorOpinionTotal}})
            <!--<span>adsf</span>-->
          </div>
          <div class="vf-news-list">
            <article class="vf-news-list_con border-bottom"
                     :class="[item.img_list.length >= 3 ? 'vf-news-list_con-three' : 'vf-news-list_con-LR']"
                     v-for="item in authorOpinionList" v-stat='{action_type:2,button_type:26}'>
              <a v-if="item.img_list.length >= 3" @click="goDetail(item.view_id)">
                <h3 class="title">{{item.view_title}}</h3>
                <div class="news-info">
                  <img v-for="(img,index) in item.img_list" :src="img.url" alt="" v-if="index<3">
                </div>
                <div class="title-tips">
                  <span class="reply">评论{{commentCount(item.view_id)}}</span>
                  <span class="pubtime">{{item.publish_time}}</span>
                </div>
              </a>
              <a v-else @click="goDetail(item.view_id)">
                <div class="news-info">
                  <h3 class="title">{{item.view_title}}</h3>
                  <div class="title-tips">
                    <span class="reply">评论{{commentCount(item.view_id)}}</span>
                    <span class="pubtime">{{item.publish_time}}</span>
                  </div>
                </div>
                <div class="news-img">
                  <img v-for="(img,index) in item.img_list" :src="img.url" alt="" v-if="index<1">
                </div>
              </a>
            </article>
            <article class="vf-bottom-tps">
              <div class="vf-bottom-tps_line" v-show="bottomText.length>0">
                <span>{{bottomText}}</span>
              </div>
            </article>
          </div>
        </div>
      </div>

    </div>


  </div>
</template>

<script>
  import Bscroll from 'better-scroll'
  import util from '@/lib/util.js'

  export default {
    name: 'LargeVipDetail',
    data() {
      return {
        author_id: '',
        authorDetail: '',
        authorOpinionTotal: '',
        authorOpinionList: [],
        followState: false,
        followType: 1,
        downFlag: true,
        sw: true,
        lastId: 0,
        isclick: '',
        height: 0,
        stateList: [],
        bottomText: "",//底部提示文字
        pageSize: 10//分页的页面大小
      }
    },
    watch: {
      "$route": "initData"
    },
    created: function () {
      util.vars.in_time = new Date().getTime();
      this.height = document.documentElement.clientHeight - 44;
      this.initData();
    },
    methods: {
      initData() {
        if (this.$route.path == "/pages/LargeVipDetail" && this.author_id != this.$route.query.aId) {
          this.author_id = this.$route.query.aId;
          this.getauthorDetail();
          this.getViewList(0);
          this.getfollowState();
        }
      },
      getauthorDetail() {
        util.ajax.get(`/author/detail?author_id=${this.author_id}`).then((res) => {
          this.authorDetail = res.data;
        });
      },
      getViewList(lastId) {
        if (lastId == 0) {
          this.sw = true;
          this.lastId = 0;
          this.downFlag = true;
          this.authorOpinionTotal = 0;
          this.authorOpinionList = [];
        }
        if (!this.downFlag) {
          return
        }
        let ori_last_id=this.lastId;
        util.ajax.get(`/author/view/list?author_id=${this.author_id}&last_id=${this.lastId}&page_size=${this.pageSize}`).then((res) => {
          if (res.code == 1) {
            let statsList = [];
            //格式化时间
            let list = res.data.list.map(item => {
              statsList.push(item.view_id);
              item['publish_time'] = util.formatDate(item['publish_time']);
              item['img_list'] = item['img_list'] || [];
              return item
            });
            if (statsList && statsList.length > 0) {
              this.getStatistics(statsList);
            }

            this.authorOpinionTotal = res.data.total;
            this.authorOpinionList = this.authorOpinionList.concat(list);
            if (list.length < this.pageSize) {
              this.downFlag = false;
              //如果第一页就加载完毕，则不显示文字
              if(ori_last_id===0){
                this.bottomText="";
              } else {
                this.bottomText="您太勤奋了，没有更多了";
              }

            } else {
              this.downFlag = true;
              this.bottomText="加载中";
            }
            // 数据加载完毕
            this.sw = true;
            // 取最后一条数据id
            if (list.length > 0) {
              let len = list.length - 1;
              this.lastId = list[len]['view_id'];
            }

            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new Bscroll(this.$refs.Vlist, {
                  click: true,
                  scrollY: true,
                  pullUpLoad: {
                    threshold: 50
                  }
                });

                this.scroll.on('pullingUp', () => {
                  this.getViewList();
                  this.scroll.finishPullUp();
                  this.scroll.refresh();
                });
              }
              else {
                this.scroll.refresh()
              }
            })
          }
        });
      },
      getStatistics: function (list) {
        if (list && list.length > 0) {
          util.ajax.get(`view/statistics/list?view_id_list=${list}`).then((res) => {
            if (res.code == 1) {
              this.stateList = this.stateList.concat(res.data);
            }
          });
        }
      },
      getfollowState() {
        util.ajax.get(`/author/follow_status?author_id=${this.author_id}`).then((res) => {
          this.followState = res.data;
          this.isclick = res.code
        });
      },
      getfollowSet() {
        util.ajax.post('/author/follow', util.jsonStringify({
          author_id: this.author_id,
          follow_type: this.followType
        })).then((res) => {
          this.getauthorDetail();
        });
      },
      handleFollow() {
        this.$parent.login(5).then((res) => {
          this.followState = !this.followState;
          this.followType = this.followState ? 1 : 0;
          this.getfollowSet()
        })
      },
      goDetail(viewId) {
        this.$router.push({path: "/pages/Detail", query: {id: viewId}})
      },
      commentCount: function (id) {
        let count = this.stateList.find((item) => {
          item.comment_amount = item.comment_amount > 10000 ? `${item.comment_amount}`.substring(0, 1) + '万+' : item.comment_amount;
          return item.view_id == id ? true : false
        });
        return count ? count['comment_amount'] : "";
      }
    },
    mounted() {
    }
  }
</script>
<style scoped>
  .al-concern {
    background: #FF4E00;
    color: #fff;
  }
</style>
